<template>
	<view class="content">
		<my-header :title="parentTitle" @instruct="handinstruct" />
		<scroll-view :style="{paddingTop:padding + 'rpx',paddingBottom:paddingbot + 'rpx'}" :scroll-y="true"
			class="content-content" @scroll="handleScroll">
			<view class="scrollvie-content">
				<view class="ServiceTypeBox">
					<view class="reason">
						<p class="title">服务类型</p>
						<view class="btnbox">
							<view class="btnitem" :class="[btnactive == 0 ? 'btnitemact':'btnitem']" @click="btnact(0)">
								退款
								<image v-if="btnactive == 0" class="selectedimg"
									:src="proxy.serverimageUrl + 'ProductDetails/Selected.png'" mode=""></image>
							</view>
							<view class="btnitem" :class="[btnactive == 1 ? 'btnitemact':'btnitem']" @click="btnact(1)">
								换货
								<image v-if="btnactive == 1" class="selectedimg"
									:src="proxy.serverimageUrl + 'ProductDetails/Selected.png'" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="commodityBox">
					<p class="title">请选择售后商品</p>
					<view class="shopitem" v-for="(item,index) in orderdetaildata.orderDetailDtos" :key="index">
						<view class="left-ridio" @tap="selectedItem(item,index)" v-if="(oid || rid) && (item.status != 1 && item.status != 2)">
							<radio class="radio-content" :checked="item.checked" color="#013CAA"></radio>
						</view>
						<view class="center-image">
							<image :src="item.commonFileEntities[0].url" mode=""></image>
						</view>
						<view class="right-information">
							<p class="title">{{item.cname}}</p> 
							<view class="selectBox">
								<view>{{item.sname}},{{item.specificationsSize}}</view>
							</view>
							<view class="priceAndnum">
								<view class="left-price">
									￥{{item.totalPrice}}
								</view>
								<view class="right-number">
									x{{item.number}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="problem">
					<p class="title">问题描述</p>
					<up-textarea v-model="remark" border="none" placeholder="请输入内容"></up-textarea>
					<p class="title2">图片凭证</p>
					<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></up-upload>
				</view>
			</view>
			<view class="kongBox" style="height: 30rpx; width: 100%;">

			</view>
		</scroll-view>
		<view class="bottom-btnBox">
			<view class="box">
				<view></view>
				<view class="btnbox">
					<up-button text="提交申请" @click="submit" color="#013CAA"></up-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		getCurrentInstance
	} from 'vue';
	import {
		orderDetailByOrderId,
		savaRefundRecord,
		queryLogisticsNo,
		queryRefundRecordByID,
		addLogisticsNo,
		reapplyRefundRecordByRefundId
	} from '../../utils/api.js'
	import BASE_URL from '@/utils/env.js' //引入接口共用地址 //引入仓库，使用的是pinia
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const baseUrl = BASE_URL
	const submittype = ref('')
	const btntext = ref('')
	const oid = ref('')
	const rid = ref('')
	const current = ref('')
	onLoad((o) => {
		current.value = o.current
		console.log(current.value, 'current.......');
		console.log(o.orderId, 'o.orderId.......');
		submittype.value = o.type
		if (o.orderId) {
			oid.value = o.orderId
			getorderdetail(o.orderId)
		}
		if (o.refundId) {
			rid.value = o.refundId
			getrefunddetail(o.refundId)
		}
		if (o.type && o.type == '提交申请') {
			btntext.value = '提交申请'
		}
	})
	const orderdetaildata = ref({})
	const getorderdetail = (orderId) => {
		orderDetailByOrderId(orderId).then(res => {
			if (res.code == 200) {
				orderdetaildata.value = res.data
				if (res.data)
					if (res.data.logisticsNo) {
						queryLogisticsNo(res.data.logisticsNo).then(res => {
							console.log(res);
						})
					}
			}
		})

	}
	const getrefunddetail = (refundId) => {
		queryRefundRecordByID(refundId).then(res => {
			if (res.code == 200) {
				orderdetaildata.value = res.data
				fileList1.value = res.data.commonFileEntities
			}
		})
	}
	const paddingbot = ref(100)
	/*头部组件自定义title*/
	const parentTitle = ref('售后服务')
	/*文本域输入框绑定值*/
	const remark = ref('')
	const inputvalue = ref('')
	/*控制button的事件*/
	/*控制button按钮显示*/
	const btnactive = ref(0)
	const btnact = (type) => {
		btnactive.value = type
	}

	/*用于头部组件返回事件*/
	const instruct = ref('back')
	const handinstruct = (instruct) => {
		switch (instruct) {
			// 返回
			case 'back':
				uni.navigateBack({
					delta: 1
				})
				break;
		}
	}
	/*根据下滑事件判断内边距*/
	const padding = ref(30);
	/*滑动事件*/
	const handleScroll = (event) => {
		// 检查滚动位置，如果需要取消padding，则设置padding为0
		if (event.detail.scrollTop > 30) { // 100是一个阈值，表示在滚动100px后取消padding
			padding.value = 0;
		} else {
			padding.value = 30; // 恢复初始padding
		}
	}
	/*选择的商品*/
	const radioitem = ref({})
	/*商品数量和价格*/
	const totalN = computed(() => {
		// 3.1 获取书籍的价格和数量
		// 将bookList转化为整数的数组
		const result = orderdetaildata.value.orderDetailDtos
			.map((book) => {
				if (book.checked) {
					const {
						number
					} = book;
					return number;
				} else {
					return 0 * 0
				}

			})
			// 3.2使用reduce求和
			.reduce((a, b) => a + b, 0);
		// 3.3 保留两位小数
		return result
	});
	const totalP = computed(() => {
		// 3.1 获取书籍的价格和数量
		// 将bookList转化为整数的数组
		const result = orderdetaildata.value.orderDetailDtos
			.map((book) => {
				console.log(book, 'book');
				if (book.checked) {
					const {
						number,
						unitPrice
					} = book;
					return unitPrice * number;
				} else {
					return 0 * 0
				}

			})
			// 3.2使用reduce求和
			.reduce((a, b) => a + b, 0);
		// 3.3 保留两位小数
		return result
	});

	const didArray = ref('')
	/*商品单选按钮事件*/
	const selectedItem = (item, index) => {
		item.checked = !item.checked
		radioitem.value = item
		if (item.checked) {
			didArray.value += item.did + ','
		} else {
			didArray.value = ''
		}
	}
	/*提交申请*/
	const submit = () => {
		if (oid.value) {
			console.log(didArray.value);
			if (didArray.value == '') {
				uni.showToast({
					title: '当前没有可申请退货的商品',
					duration: 1500,
					icon: 'none'
				})
				return
			}
			let params = {
				commonFileRequests: fileList1.value,
				number: totalN.value,
				openid: uni.getStorageSync('openid'),
				refundType: btnactive.value + 1,
				remark: remark.value,
				sid: uni.getStorageSync('sid'),
				totalPrice: totalP.value,
				orderId: oid.value,
				didArray: didArray.value.substring(0, didArray.value.length - 1)
			}
			savaRefundRecord(params).then(res => {
				if (res.code == 200) {
					setTimeout(() => {
						uni.showToast({
							title: '申请成功',
							duration: 1500,
							icon: 'success'
						})
						setTimeout(() => {
							uni.hideToast();
							uni.redirectTo({
								url: '/subpages/orderlist/index?current=' + current
									.value
							})
						}, 1500)
					}, 0)
				}
			})
		} else {
			let params = {
				commonFileRequests: fileList1.value,
				remark: remark.value,
				refundId: rid.value,
				refundType: btnactive.value + 1
			}
			reapplyRefundRecordByRefundId(params).then(res => {
				if (res.code == 200) {
					setTimeout(() => {
						uni.showToast({
							title: '申请成功',
							duration: 1500,
							icon: 'success'
						})
						setTimeout(() => {
							uni.hideToast();
							uni.redirectTo({
								url: '/subpages/orderlist/index?current=' + current
									.value
							})
						}, 1500)
					}, 0)
				}
			})
		}



	}
	/*上传的照片数组*/
	const fileList1 = ref([]);
	// 删除图片
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
	};

	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;
		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			console.log(result);
			let item = fileList1.value[fileListLen];
			fileList1.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
				fileType: 0
			});
			fileListLen++;
		}
	};
	/*传照片到服务器的模拟事件*/
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			/*调用uniapp的上传方法*/
			let a = uni.uploadFile({
				url: baseUrl + '/common/upload', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				// formData: {
				// 	user: 'test',
				// },
				success: (res) => {
					setTimeout(() => {
						const resdata = JSON.parse(res.data)
						resolve(resdata.url)
					}, 1000);
				},
			});
		});
	};
</script>

<style scoped lang="scss">
	.content {
		height: 100vh;
		background-color: #F2F2F2;
		width: 100vw;

		.content-content {
			box-sizing: border-box;
			padding: 30rpx 30rpx 100rpx;
			height: calc(100vh - 194rpx);

			.scrollvie-content {
				.ServiceTypeBox {
					width: 100%;
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 40rpx 37rpx;

					.reason {
						.title {
							font-family: Source Han Sans SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #303030;
							line-height: 28rpx;
						}

						.btnbox {
							margin-top: 30rpx;
							display: flex;

							.btnitem {
								width: 190rpx;
								height: 100rpx;
								background: #F8F8F8;
								border-radius: 8rpx;
								border: 1rpx solid #EEEEEE;
								margin-right: 24rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.btnitemact {
								background: #EDF3FF;
								border-radius: 8rpx;
								display: flex;
								position: relative;
								align-items: center;
								justify-content: center;
								border: 1px solid #013CAA;

								.selectedimg {
									width: 43rpx;
									height: 42rpx;
									position: absolute;
									right: 0;
									bottom: 0;
								}
							}
						}
					}

					.stateBox {
						.title {
							font-family: Source Han Sans SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #303030;
							line-height: 36rpx;
						}

						.title1 {
							margin-top: 18rpx;
							font-family: Source Han Sans SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #BFBFBF;
							line-height: 24rpx;
						}

						.addrBox {
							margin-top: 40rpx;
							width: 100%;
							padding: 36rpx;
							border-radius: 10rpx;
							display: flex;
							align-items: center;
							background-color: #EEEEEE;

							image {
								width: 74rpx;
								height: 74rpx;
							}

							.addrtext {
								margin-left: 30rpx;

								.textp1 {
									font-family: Source Han Sans SC;
									font-weight: 500;
									font-size: 28rpx;
									color: #303030;
									line-height: 28rpx;
								}

								.textp2 {

									margin-top: 18rpx;
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 26rpx;
									color: #636363;
									line-height: 26rpx;
								}
							}
						}
					}
				}

				.logisticsBox {
					padding: 35rpx;
					background-color: #FFFFFF;
					border-radius: 20rpx;
					margin-top: 30rpx;

					.title {
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #303030;
					}

					.kong-line {
						width: 100%;
						height: 1rpx;
						margin-top: 28rpx;
						background: #DFDFDF;
					}

					.setps {
						margin-top: 50rpx;

						.setps-item {
							display: flex;

							.setps-item-left {
								width: 30rpx;
								display: flex;
								flex-direction: column;
								align-items: center;

								.round {
									width: 30rpx;
									height: 30rpx;
									background: #FFFFFF;
									border-radius: 50%;
									border: 8rpx solid #4A87F8;
								}

								.rounds {
									width: 14rpx;
									height: 14rpx;
									background: #DEDEDE;
									border-radius: 50%;
								}

								.colline {
									width: 2rpx;
									height: calc(100% - 30rpx);
									background: #DEDEDE;
								}

								.collines {
									width: 2rpx;
									height: calc(100% - 14rpx);
									background: #DEDEDE;
								}
							}

							.setps-item-right {
								margin-left: 30rpx;
								height: 120rpx;

								.addrtitle {
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #303030;
									line-height: 28rpx;
								}

								.addrtime {
									margin-top: 22rpx;
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 24rpx;
									line-height: 24rpx;
									color: #9B9B9B;
								}
							}
						}

					}

					.setps-item:last-child {
						.setps-item-left {
							.colline {
								display: none;
							}

							.collines {
								display: none;
							}
						}

					}

				}

				.commodityBox {
					margin-top: 30rpx;
					width: 100%;
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 39rpx 30rpx;

					.title {
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #303030;
						line-height: 30rpx;
					}

					.shopitem {
						margin-top: 36rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left-ridio {
							.radio-content {
								transform: scale(0.65)
							}
						}

						.center-image {
							width: 180rpx;
							height: 180rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.right-information {
							width: 348rpx;
							margin-left: 31rpx;

							.title {
								font-family: SourceHanSansSC;
								font-weight: 500;
								font-size: 30rpx;
								color: #303030;
								line-height: 40rpx;
							}

							.selectBox {
								margin-top: 20rpx;
								font-family: Source Han Sans SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #636363;
								line-height: 40rpx;
							}

							.priceAndnum {
								margin-top: 49rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.left-price {
									font-family: SourceHanSansSC;
									font-weight: 500;
									font-size: 36rpx;
									color: #013CAA;
									line-height: 40rpx;
								}

								.right-number {
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #636363;
								}
							}
						}
					}

					.refunddetail {
						margin-top: 42rpx;

						.kong-line {
							width: 100%;
							height: 1rpx;
							background: #EEEEEE;
						}

						.publicsty {
							margin-top: 41rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.publicsty-left {
								font-family: Source Han Sans SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #303030;
								line-height: 28rpx;

								.spantext {
									margin-left: 20rpx;
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #929292;
								}
							}

							.publicsty-right {
								font-family: Source Han Sans SC;
								font-weight: 500;
								font-size: 32rpx;
								color: #303030;
								line-height: 32rpx;
							}

							.publicsty-text {
								font-family: Source Han Sans SC;
								font-weight: 400 !important;
								font-size: 28rpx !important;
								color: #303030;
								line-height: 28rpx;
							}

						}
					}
				}

				.problem {
					margin-top: 31rpx;
					width: 100%;
					background: #FFFFFF;
					padding: 35rpx 38rpx;
					border-radius: 20rpx;

					.title {
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #303030;
						line-height: 28rpx;
					}

					.title2 {
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #303030;
						line-height: 28rpx;
						margin-bottom: 30rpx;

					}

					.imageBox {
						width: 142rpx;
						height: 140rpx;
						// background: #F8F8F8;
						margin-right: 10rpx;
						border-radius: 8rpx;
						border: 1rpx solid #EEEEEE;
					}
				}
			}
		}

		.bottom-btnBox {
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 15rpx 30rpx;
			background: #FFFFFF;

			.box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btnbox {
					width: 240rpx;
					height: 80rpx;
				}
			}

		}

		::v-deep .u-popup {
			.u-popup__content {

				.popcontent {
					width: 570rpx;
					padding: 48rpx 30rpx;

					.inputcontent {
						background: #F8F8F8;
						height: 100rpx;
						display: flex;
						align-items: center;
						padding-left: 20rpx;

						.u-input {}
					}
				}

				.btnbox {
					margin-top: 38rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btn {
						width: 240rpx;
						height: 80rpx;
					}
				}
			}
		}

	}
</style>